<template>
  <div>
    <div class="navigation">
      <van-nav-bar
        :title="name"
        left-arrow
        @click-left="
          $router.push({
            path: '/index',
            query: {
              latitude: latitude,
              longitude: longitude,
              name: $route.query.nice,
              val: '外卖',
            },
          })
        "
      />
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          @open="classt = true"
          :title="classt ? '分类' : name"
          @close="classt = false"
          ref="itemst"
        >
          <div class="drop-down">
            <div class="left">
              <ul>
                <li
                  v-for="val in classify"
                  :key="val.id"
                  @click="classifications(val.id, val.sub_categories)"
                  :class="{ whites: val.id == calssid }"
                >
                  <img :src="baseURL + val.image_url" alt="" />
                  <van-icon
                    name="arrow"
                    style="float: right; line-height: 44px; margin-right: 15px"
                  />
                  {{ val.name
                  }}<van-badge :content="val.count" color="#cccccc" />
                </li>
              </ul>
            </div>
            <div class="right">
              <ul>
                <li
                  v-for="vals in sub_categories"
                  :key="vals.id"
                  @click="sub_categoriess(vals.id)"
                >
                  {{ vals.name }} <span>{{ vals.count }}</span>
                </li>
              </ul>
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="排序" ref="items">
          <div class="sort">
            <ul>
              <li
                v-for="(val, index) in sort"
                :key="index"
                @click="classindex(index, val.id)"
              >
                <span :class="val.calss" :style="val.color"></span>
                <div>
                  {{ val.name
                  }}<span
                    v-if="classindexs == index"
                    class="iconfont icon-gougou"
                    style="color: #3290e8"
                  ></span>
                </div>
              </li>
            </ul>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item">
          <div class="scree">
            <div>配送方式</div>
            <div
              v-for="val in peisonfanshis"
              :key="val.id"
              class="checkbox"
              @click="checks ? (checks = false) : (checks = true)"
            >
              <i
                class="iconfont icon-fengniao-01"
                style="color: #0089cf"
                :class="{ 'icon-gougou': checks }"
              ></i>
              <span>{{ val.text }}</span>
            </div>
            <div>商家属性 (可以多选)</div>
            <div
              v-for="(vals, index) in commodity"
              :key="vals.id"
              class="checkboxs"
              @click="xuanzhuon(index, vals)"
            >
              <i class="iconfont icon-gougou" v-show="vals.__v == 1"></i>
              <span v-show="vals.__v == 0" class="icomred">{{
                vals.icon_name
              }}</span>
              <span>{{ vals.name }}</span>
            </div>
            <van-button type="default" class="moren" @click="del"
              >清空</van-button
            ><van-button type="primary" @click="onConfirm"
              >确定<span v-if="csindex != 0">({{ csindex }})</span></van-button
            >
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="merchandise">
      <div v-for="(val, index) in productlists" :key="index">
        <list :obj="val"></list>
      </div>
    </div>
  </div>
</template>
       
<script>
import {
  classification,
  sanpuliebiao,
  peisonfanshi,
  productlist,
} from "../api/user";
import list from "../components/list.vue";

export default {
  components: {
    list,
  },
  data() {
    return {
      classindexs: " ",
      sort: [
        {
          name: "智能排序",
          calss: "iconfont icon-paixu",
          color: "color:#3190e8;",
          id: 4,
        },
        {
          name: "距离最近",
          calss: "iconfont icon-julizuijin",
          color: "color:#3190e8;",
          id: 5,
        },
        {
          name: "销售最高",
          calss: "iconfont icon-huore",
          color: "color:red;",
          id: 6,
        },
        {
          name: "起送价最低",
          calss: "iconfont icon-tishi",
          color: "color:#ecc959;",
          id: 1,
        },
        {
          name: "配送速度最快",
          calss: "iconfont icon-shijian",
          color: "color:#0a0;",
          id: 2,
        },
        {
          name: "评分最高",
          calss: "iconfont icon-xingxing",
          color: "color:#ecc959;",
          id: 3,
        },
      ],
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      classt: false,
      classify: [],
      baseURL: "https://fuss10.elemecdn.com/",
      calssid: "",
      sub_categories: [],
      commodity: [],
      peisonfanshis: [],
      checks: false,
      checksid: "",
      csindex: 0,
      name: this.$route.query.name,
      latitude: this.$route.query.latitude,
      longitude: this.$route.query.longitude,
      productlists: [],
      datas: {
        latitude: this.$route.query.latitude,
        longitude: this.$route.query.longitude,
        order_by: "",
        restaurant_category_ids: [],
        support_ids: [],
      },
    };
  },
  created() {
    console.log(this.$route.query.nice);
    this.sanpulist();
    peisonfanshi().then((res) => {
      this.peisonfanshis = res.data;
      console.log(2, this.peisonfanshis);
    });
    sanpuliebiao().then((res) => {
      this.commodity = res.data;
      console.log(1, this.commodity);
    });
    classification().then((res) => {
      this.classify = res.data;
    });
  },
  methods: {
    sub_categoriess(id) {
      this.$refs.itemst.toggle();
      this.datas.restaurant_category_ids.splice(0, 1, id);
      this.sanpulist();
    },

    sanpulist() {
      productlist(this.datas).then((res) => {
        this.productlists = res.data;
        console.log(this.productlists);
      });
    },
    del() {
      this.commodity.forEach((val) => {
        val.__v = 0;
      });
      this.csindex = 0;
      this.datas.support_ids = [];
    },
    xuanzhuon(index, val) {
      this.commodity[index].__v == 1
        ? (this.commodity[index].__v = 0)
        : (this.commodity[index].__v = 1);
      if (this.commodity[index].__v == 1) {
        this.csindex++;
      } else {
        this.csindex--;
      }

      // val.__v == 1 ? this.datas.support_ids.push(val.id):this.datas.support_ids.splice()
      if (val.__v == 1) {
        this.datas.support_ids.push(val.id);
      } else {
        let id = this.commodity[index].id;
        let idx = this.datas.support_ids.indexOf(id);
        this.datas.support_ids.splice(idx, 1);
      }
      console.log(this.datas.support_ids);
    },
    onConfirm() {
      this.sanpulist();
      this.$refs.item.toggle();
    },
    classifications(id, sub_categories) {
      this.calssid = id;
      this.sub_categories = sub_categories;
    },
    classindex(index, id) {
      this.sanpulist();
      this.classindexs = index;
      this.datas.order_by = id;
      this.$refs.items.toggle();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #3190e8;
  .van-nav-bar__arrow {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.drop-down {
  height: 11.1%;
  width: 100%;

  /deep/.left {
    width: 50%;
    background-color: #f1f1f1;
    height: 11.1%;
    line-height: 44px;
    float: left;
    img {
      width: 30px;
      display: block;
      float: left;
      margin-right: 10px;
      margin-top: 5px;
    }
    .van-badge {
      float: right;
      margin-right: 10px;
      margin-top: 15px;
      font-size: 14px;
    }
  }
  .right {
    width: 50%;
    float: left;
    height: 400px;
    overflow-y: auto;
    li {
      height: 11.1%;
      border-bottom: 1px solid #ccc;
      line-height: 44px;
      color: #6b6b6b;
      span {
        float: right;
        margin-right: 10px;
      }
    }
  }
}
.sort {
  height: 400px;
  width: 100%;
  li {
    height: 67px;
    line-height: 66px;
    span {
      float: left;
      margin: 0 10px;
      font-weight: bold;
    }
    div {
      width: 90%;
      float: left;
      border-bottom: 1px solid #ccc;
      span {
        float: right;
      }
    }
  }
}
.img-icon {
  height: 20px;
}
.whites {
  background-color: #ffffff;
}
.scree {
  padding: 10px;
  height: 300px;
}
.checkbox {
  width: 119px;
  height: 40px;
  border: 1px solid #ccc;
  margin: 10px 0;
  margin-right: 10px;
  line-height: 40px;
  font-size: 14px;
  i {
    margin-right: 10px;
  }
}
.checkboxs {
  float: left;
  width: 119px;
  height: 40px;
  border: 1px solid #ccc;
  margin: 10px 0;
  margin-right: 10px;
  line-height: 40px;
  font-size: 14px;
  .icomred {
    margin: 0 10px;
    padding: 0 4px;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
  }
  i {
    padding: 10px;
    color: #3190e8;
  }
}
/deep/.scree .van-button {
  margin-top: 20px;
  width: 45%;
  height: 20%;
  margin-right: 19px;
}
/deep/.moren {
  color: #000;
  background-color: #f1f1f1;
}
.navigation {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.merchandise {
  margin-top: 100px;
}
</style>